<template>
  <!-- 统计 -->
  <view class="statistics">
    <view class="header">
      <view class="btn" @tap="goto('/pages/statistics/person')">
        <view class="btn-icon primary">
          <m-icon type="contact-filled"></m-icon>
        </view>
        <text>隔离人员汇总</text>
      </view>
      <view class="btn" @tap="goto('/pages/statistics/room')">
        <view class="btn-icon primary">
          <m-icon type="home-filled"></m-icon>
        </view>
        <text>隔离房间汇总</text>
      </view>
      <view class="btn" @tap="goto('/pages/statistics/sample')">
        <view class="btn-icon primary">
          <m-icon type="email-filled"></m-icon>
        </view>
        <text>采样收样汇总</text>
      </view>
    </view>
    <data-board></data-board>
  </view>
</template>
<script>
import DataBoard from '../main/data-board.vue';

export default {
  components: {
    DataBoard
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url
      });
    }
  }
};
</script>
<style lang="scss">
.statistics {
  width: 100%;
  padding: 20rpx 40rpx;

  .header {
    margin: 0 auto 40rpx;
    padding: 40rpx 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 24rpx;
    box-shadow: 0px 0px 30rpx rgb(41 132 248 / 10%);

    .btn {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 2.5;

      &-icon {
        width: 76rpx;
        height: 76rpx;
        font-size: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;

        &.primary {
          background-color: $uni-color-primary;
        }

        &.success {
          background-color: $uni-color-success;
        }

        &.warning {
          background-color: $uni-color-warning;
        }

        &.error {
          background-color: $uni-color-error;
        }
      }

      text {
        font-size: 26rpx;
      }
    }
  }
}
</style>
